<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/chat.css" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body contextmenu="return false;">

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<h1 class="mui-title title-color"><b id="chatting-nickname"></b></h1>
		</header>

		<div id="msg-outter" class="mui-content">
			<div id='msg'>
			</div>
		</div>
		
		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button type="button" class="mui-btn mui-btn-gray" id="send">发送</button>
			</label>
		</footer>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/aes_2.js"></script>
		<script type="text/javascript">
			// 创建命名空间，外部无法访问 $ <- mui  doc <- document
//			(function($,doc){
				var friendUserId;
				var friendFaceImg;
				var friendNickName;
				mui.plusReady(function() {
					var me = app.getUserInfo();
				    // 获取聊天页面webview
					var chattingWebview = plus.webview.currentWebview();
					// 设置聊天页面的软键盘样式
					chattingWebview.setStyle({
						softinputMode: "adjustResize"
					});
					// 获取上一个页面传入的好友属性值
					friendUserId = chattingWebview.friendUserId;
					friendNickName = chattingWebview.friendNickName;
					friendFaceImg = chattingWebview.friendFaceImg;
					// 标题改为朋友的昵称
					document.getElementById("chatting-nickname").innerHTML = friendNickName;
					// 渲染聊天记录
					initChatHistory();
										
					var msgList = document.getElementById("msg");
					msgList.scrollTop = msgList.scrollHeight + msgList.offsetHeight;
				
					var msg_text = document.getElementById("msg-text");
					var send	 =document.getElementById("send");
					// 监听输入，让按钮变色
					msg_text.addEventListener("input",function(){
						var msg_text_val = msg_text.value;
						if (msg_text_val.length > 0) {
							send.setAttribute("class", "mui-btn-green");
						} else {
							send.setAttribute("class", "mui-btn-gray");
						}
					});
					// 对当前的窗口监听resize事件
					window.addEventListener("resize", function(){
						resizeScreen();
						document.getElementById("msg-outter").style.paddingBottom = "50px";
					});
					// 发送消息按钮的事件绑定
					send.addEventListener("tap", function(){
						// 发送之前判断网络的状态
						var connectionStatus = plus.networkinfo.getCurrentType();
						if (connectionStatus == 0 || connectionStatus == 1) {
							app.showToast("网络未连接...", "error");
							return;
						}
						// 获取消息内容
						var msg_text_val = msg_text.value;
						// 判断消息内容，如果长度等于0，则return
						if (msg_text_val.length === 0) {
							msg_text.focus()
							return;
						}
						sendMsg(me.faceImg,msg_text_val);	
						msg_text.value = "";
						send.setAttribute("class", "mui-btn-gray");
						
						msg_text_val = Encrypt(msg_text_val);
						var chatMsg = new app.chatMsg(me.userId,friendUserId,msg_text_val,null);
						var dataContent = new app.dataContent(app.CHAT,chatMsg,null)
							// 调用webSocket发送消息到后端
						var chatlistWebview = plus.webview.getWebviewById("chatlist.html");
						chatlistWebview.evalJS("	CHAT.chat('"+ JSON.stringify(dataContent) +"')");
						
						app.saveUserChatHistory(me.userId, friendUserId, msg_text_val, 1);
						app.saveUserChatSnapshot(me.userId, friendUserId, msg_text_val, true);
					});
				});
				function Encrypt(word){
		            return CryptoJS.AES.encrypt(word,"crismcn").toString();
		        }
				function Decrypt(word){
	        		    	return CryptoJS.AES.decrypt(word,"crismcn").toString(CryptoJS.enc.Utf8);
	        		}
				function playSendMsgRing(){
					p = plus.audio.createPlayer( "/mp3/send.mp3" );
					p.play(); 
				}
				// 重新调整聊天窗口
				function resizeScreen() {
					var areaMsgList = document.getElementById("msg");
					// 设置聊天记录进入页面的时候自动滚动到最后一条
					areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
				};
				function sendMsg(faceImg,msg){
					var sendHtml =  '<div class="me_lists">'+
										'<div class="header_img">'+
											'<img src="'+faceImg+'" width="40px" height="40px" />'+
										'</div>'+
										'<div class="msg-wrapper left">'+
											'<p class="msg-right-green">'+msg+'</p>'+
										'</div>'+
									'</div>'																		
					var msg_content= document.getElementById("msg");
					msg_content.insertAdjacentHTML("beforeend",sendHtml);
					playSendMsgRing();
				}
				function receiveMsg(msg){
					msg = Decrypt(msg);
					var sendHtml =  '<div class="friend_lists">'+
										'<div class="header_img">'+
											'<img src="'+ friendFaceImg +'" width="40px" height="40px" />'+
										'</div>'+
										'<div class="msg-wrapper right">'+
											'<p class="msg-left-white">'+msg+'</p>'+
										'</div>'+
									'</div>'
					var msg_content= document.getElementById("msg");
					msg_content.insertAdjacentHTML("beforeend",sendHtml);
//					resizeScreen();
				}
//			}(mui,document));
			// 初始化聊天记录列表
			function initChatHistory(){
				let msg_dom = document.getElementById("msg");
				let myInfo = app.getUserInfo();
				let myUserId = myInfo.userId;
				let myFaceImg = myInfo.faceImg;
//				let friendUserId;
//				let friendFaceImg;
//				let friendNickName;
				let charHistoryList = app.getUserChatHistory(myUserId,friendUserId);
				let addHtml = "";
				let chatLength = charHistoryList.length;
				for (let i = 0; i < chatLength; i++) {
					let singleMsg = charHistoryList[i];
					if(singleMsg.flag == 1){
						addHtml +=  '<div class="me_lists">'+
							'<div class="header_img">'+
								'<img src="'+ myFaceImg + '" width="40px" height="40px" />'+
							'</div>'+
							'<div class="msg-wrapper left">'+
								'<p class="msg-right-green">'+Decrypt(singleMsg.msg)+'</p>'+
							'</div>'+
						'</div>'
					}else{
						addHtml +=  '<div class="friend_lists">'+
							'<div class="header_img">'+
								'<img src="'+ friendFaceImg +'" width="40px" height="40px" />'+
							'</div>'+
							'<div class="msg-wrapper right">'+
								'<p class="msg-left-white">'+Decrypt(singleMsg.msg)+'</p>'+
							'</div>'+
						'</div>'
					}
				}
				msg_dom.innerHTML = addHtml;
			}
		</script>
	</body>

</html>